{% extends 'base/nav_h.html' %}
{% block css %}
{{super()}}
<style>
    @media (max-width: 768px) {
        .card-body {
            text-align: center;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="container py-3">
    {% for note in noteList%}
    <p class="fs-5">{{note.category}}</p>
    <div class="shadow p-3 mb-5 bg-body rounded">
        <div class="row row-cols-2 row-cols-md-2 g-3">
            {% for item in note.data%}
            <div class="col">
                <div class="row row-cols-1 row-cols-md-2">
                    <div class="col col-md-2">
                        <img src="{{ url_for('static', filename=item.img) }}" class="img-fluid rounded mx-auto d-block" alt="...">
                    </div>
                    <div class="col col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">{{item.title}}</h5>
                            <p class="card-text">{{item.text}}</p>
                            <small class="text-muted">{{item.section}} mins</small>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}